<template>
  <!-- border-style: dashed/dotted/double -->
  <!-- direction="vertical" 垂直方向 horizontal 水平方向 -->
  <el-divider content-position="center">接口配置</el-divider>
  <el-form-item label="请求地址">
    <el-input v-model="props.options.url" placeholder="请求地址"></el-input>
  </el-form-item>
  <el-form-item label="请求方式">
    <el-select v-model="props.options.method" placeholder="请求方式" style="width: 100%">
      <el-option label="GET" value="GET"/>
      <el-option label="POST" value="POST"/>
    </el-select>
  </el-form-item>
  <el-form-item label="数据层级">
    <el-input v-model="props.options.res" placeholder="数据层级"></el-input>
    <el-tooltip
        class="box-item"
        effect="dark"
        placement="top-start"
    >
      <template #content>
        <p>从接口返回的JSON对象中哪一层取数据</p>
        <p>例如返回对象为：res.data.resultObj，要获取resultObj，填写：data.resultObj</p>
      </template>
      <el-icon><QuestionFilled /></el-icon>
    </el-tooltip>
  </el-form-item>
  <el-form-item label="参数方式">
    <el-select v-model="props.options.paramsType" placeholder="参数方式" style="width: 100%">
      <el-option label="form" value="form"/>
      <el-option label="json" value="json"/>
    </el-select>
  </el-form-item>
  <el-divider content-position="left" border-style="dashed">字段映射</el-divider>
  <template v-if="props.options.labelKey">
    <el-form-item label="显示标识">
      <el-input v-model="props.options.labelKey" placeholder="请输入显示标识"></el-input>
    </el-form-item>
    <el-form-item label="值标识">
      <el-input v-model="props.options.valueKey" placeholder="请输入值标识"></el-input>
    </el-form-item>
    <el-form-item label="下级标识">
      <el-input v-model="props.options.childrenKey" placeholder="请输入下级标识"></el-input>
    </el-form-item>
  </template>
  <el-divider content-position="left" border-style="dashed">请求头设置</el-divider>
  <div class="flex items-center" v-for="(item,index) in props.options.headerList" style="margin: 5px 0">
    <el-input class="flex-grow" placeholder="key" v-model="item.key" style="margin-right: 5px"></el-input>
    <el-input class="flex-grow" placeholder="value" v-model="item.value"></el-input>
    <el-icon class="text-lg cursor-pointer text-red-500" @click="removeHeader(index)">
      <NameIcon name="delete"/>
    </el-icon>
  </div>
  <el-button text type="primary" @click="addHeader">
    <el-icon>
      <NameIcon name="plus"/>
    </el-icon>
    添加
  </el-button>
  <el-divider content-position="left" border-style="dashed">参数</el-divider>
  <div class="flex items-center" v-for="(item,index) in props.options.paramList" style="margin: 5px 0">
    <el-input class="flex-grow" placeholder="key" v-model="item.key" style="margin-right: 5px"></el-input>
    <el-input class="flex-grow" placeholder="value" v-model="item.value"></el-input>
    <el-icon class="text-lg cursor-pointer text-red-500" @click="removeParam(index)">
      <NameIcon name="delete"/>
    </el-icon>
  </div>
  <el-button text type="primary" @click="addParam">
    <el-icon>
      <NameIcon name="plus"/>
    </el-icon>
    添加
  </el-button>
  <template v-if="props.options.fieldsMap">
    <el-divider content-position="left" border-style="dashed">
      <div style="display: flex;align-items: center">
        <span>字段映射</span>
        <el-tooltip
            class="box-item"
            effect="dark"
            placement="top-start"
        >
          <template #content>
            <p>接口返回数据中的字段key跟当前识别组件下的字段对应</p>
          </template>
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
    </el-divider>
    <el-form-item :label="key" v-for="(value,key) in props.options.fieldsMap" :key="key">
      <el-input v-model="props.options.fieldsMap[key]" :placeholder="key"></el-input>
    </el-form-item>
  </template>
</template>
<script setup>
import {reactive, defineProps, defineEmits} from 'vue'
import {QuestionFilled} from '@element-plus/icons-vue'
import NameIcon from '../NameIcon.vue'

const props = defineProps({
  options: Object,
})

const emit = defineEmits(['success']);

const data = reactive({})

const addParam = ()=>{
  props?.options?.paramList?.push({key:'',value:''})
}

const removeParam = (index)=>{
  props?.options?.paramList?.splice(index,1)
}

const addHeader = ()=>{
  props?.options?.headerList?.push({key:'',value:''})
}

const removeHeader = (index)=>{
  props?.options?.headerList?.splice(index,1)
}
</script>
<style scoped lang="scss">
.props-editor {

}
</style>
